<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学号+姓名+站点说明</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            padding: 20px;
            background: #fff;
        }
        .about-container {
            max-width: 800px;
            margin: 0 auto;
        }
        .section {
            background: #F1F8E9;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h2 {
            color: #2E7D32;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #4CAF50;
        }
        .content {
            line-height: 1.6;
            color: #333;
        }
        .feature-list {
            list-style: none;
            padding: 0;
        }
        .feature-item {
            display: flex;
            align-items: center;
            margin: 15px 0;
            padding: 10px;
            background: white;
            border-radius: 6px;
            transition: transform 0.3s ease;
        }
        .feature-item:hover {
            transform: translateX(10px);
        }
        .feature-icon {
            width: 40px;
            height: 40px;
            background: #4CAF50;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: white;
            font-weight: bold;
        }
        .tech-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }
        .tech-tag {
            background: #E8F5E9;
            color: #2E7D32;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="about-container">
        <div class="section">
            <h2>网站介绍</h2>
            <div class="content">
                <p>本网站是一个展示家乡风貌的个人网站，旨在通过图文并茂的方式，展现家乡的自然风光、人文特色、美食文化等多个方面。网站采用现代化的网页设计理念，结合多媒体展示方式，为访问者提供丰富的浏览体验。</p>
            </div>
        </div>

        <div class="section">
            <h2>主要功能</h2>
            <ul class="feature-list">
                <li class="feature-item">
                    <div class="feature-icon">1</div>
                    <div>家乡美景展示 - 通过图片交换和热区功能展示家乡风光</div>
                </li>
                <li class="feature-item">
                    <div class="feature-icon">2</div>
                    <div>文化展示 - 使用下拉菜单展示家乡文化特色</div>
                </li>
                <li class="feature-item">
                    <div class="feature-icon">3</div>
                    <div>美食调查 - 提供交互式表单收集访客意见</div>
                </li>
                <li class="feature-item">
                    <div class="feature-icon">4</div>
                    <div>音乐欣赏 - 支持背景音乐播放和歌词同步显示</div>
                </li>
                <li class="feature-item">
                    <div class="feature-icon">5</div>
                    <div>拼图游戏 - 互动式照片拼图增强用户体验</div>
                </li>
            </ul>
        </div>

        <div class="section">
            <h2>技术实现</h2>
            <div class="content">
                <p>本网站采用现代Web技术开发，主要使用以下技术：</p>
                <div class="tech-tags">
                    <span class="tech-tag">HTML5</span>
                    <span class="tech-tag">CSS3</span>
                    <span class="tech-tag">JavaScript</span>
                    <span class="tech-tag">jQuery</span>
                    <span class="tech-tag">响应式设计</span>
                    <span class="tech-tag">Grid布局</span>
                    <span class="tech-tag">Flex布局</span>
                </div>
            </div>
        </div>

        <div class="section">
            <h2>使用说明</h2>
            <div class="content">
                <p>1. 通过左侧导航栏可以访问不同的功能页面</p>
                <p>2. 在美景页面可以点击图片查看更多细节</p>
                <p>3. 文化页面通过鼠标悬停可以展开查看详细内容</p>
                <p>4. 美食调查表单需要填写完整信息才能提交</p>
                <p>5. 音乐播放页面支持切换歌曲和控制歌词滚动</p>
                <p>6. 拼图游戏通过拖拽方式完成图片重组</p>
            </div>
        </div>
    </div>
</body>
</html> 